<template>
  <el-dialog
    append-to-body
    :title="info"
    :visible.sync="dialogVisible"
    align="left"
    :close-on-click-modal="false"
    v-loading="currLoading"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
    :width="width+'px'"
    top="30px">
    <div v-if="dialogVisible && detail.order.id>0" style="height: 750px;">
      <div id="order-dialog">
        <div class="nav-buttons">
          <div class="button" v-for="(item,index) in showTypeArr" :key="index" v-text="item.name"
               :class="{curr:showType===item.key}" @click="changeShowType(item.key)"></div>
          <div class="c"></div>
        </div>
        <div class="content" style="height: 700px; overflow: hidden; width: 100%;">

          <!--基本信息-->
          <div v-if="showType==='baseInfo'" ref="baseInfo">
            <div class="custom-table custom-table-2" style="margin-top: 20px">
              <div class="row">
                <div class="left">订单编号:</div>
                <div class="right" v-text="detail.order.orderNo"></div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">下单时间:</div>
                <div class="right" v-text="detail.order.createdAt"></div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">订单状态:</div>
                <div class="right">
                  <el-tag type="success" v-text="detail.order.status.name"></el-tag>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.orderGroupid>0">
                <div class="left">团购状态:</div>
                <div class="right">
                  <el-tag type="success" v-text="detail.order.orderGroupStatus.name"></el-tag>
                </div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">备注信息:</div>
                <div class="right">
                  <span v-text="detail.order.info?detail.order.info:'-'"></span>
                </div>
                <div class="c"></div>
              </div>


              <div class="row">
                <div class="left">配送费用:</div>
                <div class="right price-font" v-text="'￥'+ToMoney(detail.order.expressPrice)"></div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">物流方式:</div>
                <div class="right">
                  <span v-text="detail.order.sendType.name"></span>
                  <el-tag type="success" v-if="detail.order.sendType.id===1" v-text="detail.order.sendTime"></el-tag>

                </div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">支付方式:</div>
                <div class="right" v-text="detail.order.payType.name"></div>
                <div class="c"></div>
              </div>

              <div class="row" v-if="detail.order.applyStatus">
                <div class="left">退换货状态:</div>
                <div class="right" v-text="detail.order.applyStatus.name"></div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.applyType">
                <div class="left">退换货类型:</div>
                <div class="right" v-text="detail.order.applyType.name"></div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.applyOpenTime">
                <div class="left">退换货延期:</div>
                <div class="right" v-text="detail.order.applyOpenTime"></div>
                <div class="c"></div>
              </div>

              <div class="row">
                <div class="left">订单总价:</div>
                <div class="right">
                  <span class="price-font" v-text="'￥'+ToMoney(detail.order.price)"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">订单总退款:</div>
                <div class="right">
                  <span class="price-font" v-text="'￥'+ToMoney(detail.order.refund)"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">订单总收入:</div>
                <div class="right">
                  <span class="price-font" v-text="'￥'+ToMoney(detail.order.income)"></span>
                  <el-tag type="success">{{ detail.order.isSettlement.name }}</el-tag>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.vipDiscountPrice>0">
                <div class="left">会员折扣:</div>
                <div class="right">
                  <span class="price-font" v-text="'￥'+ToMoney(detail.order.vipDiscountPrice)"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.score>0">
                <div class="left">花费积分:</div>
                <div class="right">
                  <span class="price-font" v-text="detail.order.score"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row">
                <div class="left">支付时间:</div>
                <div class="right" v-text="detail.order.payTime?detail.order.payTime:'-'"></div>
                <div class="c"></div>
              </div>

              <div class="row" v-if="detail.order.sendType.id!==2">
                <div class="left">收货人-姓名&电话:</div>
                <div class="right">
                  <el-tag v-text="detail.orderAddress.name"></el-tag>
                  <el-tag v-text="detail.orderAddress.mobile"></el-tag>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.sendType.id!==2">
                <div class="left">收货人地址:</div>
                <div class="right" v-text="detail.orderAddress.addressDetail"></div>
                <div class="c"></div>
              </div>


              <div class="row" v-if="detail.order.isInvoice.id===1">
                <div class="left">发票类型:</div>
                <div class="right">
                  <el-tag type="success" v-text="detail.orderInvoice.type===0?'个人':'企业'"></el-tag>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.isInvoice.id===1">
                <div class="left">
                  {{ detail.orderInvoice.type === 1 ? '发票(企业名称)' : '发票(姓名)' }}:
                </div>
                <div class="right">
                  <el-tag v-text="detail.orderInvoice.name"></el-tag>
                </div>
                <div class="c"></div>
              </div>

              <div class="row" v-if="detail.order.isInvoice.id===1">
                <div class="left">发票(接收电话):</div>
                <div class="right">
                  <span v-text="detail.orderInvoice.receiverMobile"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.isInvoice.id===1">
                <div class="left">发票(接收人邮箱):</div>
                <div class="right" v-text="detail.orderInvoice.receiverEmail"></div>
                <div class="c"></div>
              </div>


              <div class="row" v-if="detail.order.isInvoice.id===1 && detail.orderInvoice.type===1">
                <div class="left">企业发票(纳税人编码):</div>
                <div class="right">
                  <span v-text="detail.orderInvoice.number"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.isInvoice.id===1 && detail.orderInvoice.type===1">
                <div class="left">企业发票(注册手机号):</div>
                <div class="right" v-text="detail.orderInvoice.mobile"></div>
                <div class="c"></div>
              </div>

              <div class="row" v-if="detail.order.isInvoice.id===1 && detail.orderInvoice.type===1">
                <div class="left">企业发票(注册地址):</div>
                <div class="right">
                  <span v-text="detail.orderInvoice.address"></span>
                </div>
                <div class="c"></div>
              </div>
              <div class="row" v-if="detail.order.isInvoice.id===1 && detail.orderInvoice.type===1">
                <div class="left">企业发票(开户行):</div>
                <div class="right" v-text="detail.orderInvoice.bank"></div>
                <div class="c"></div>
              </div>

              <div class="row" v-if="detail.order.isInvoice.id===1 && detail.orderInvoice.type===1">
                <div class="left">企业发票(开户账号):</div>
                <div class="right" v-text="detail.orderInvoice.bankAccount"></div>
                <div class="c"></div>
              </div>
              <div class="c"></div>

            </div>


            <div style="margin-top: 10px;">
              <div class="order-product-list">
                <product-item :curr-product="{
              id:product.productId,
              price:product.productPrice,
              model:product.productModel,
              nums:product.productNums,
              name:product.productName,
              image:product.productImage,
              score:product.score,
            }" v-for="(product,index) in detail.orderProductList" :key="index"/>
              </div>
              <div class="price-box">
                <div class="total-line" style="margin-top: 10px;">
                  商品总价: <span class="price-font" v-text="ToMoney(detail.order.productPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.expressPrice>0">
                  配送费: <span class="price-font" v-text="'+'+ToMoney(detail.order.expressPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.fullMinusPrice>0">
                  店铺满减: <span class="price-font" v-text="'-'+ToMoney(detail.order.fullMinusPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.couponPrice>0">
                  优惠券: <span class="price-font" v-text="'-'+ToMoney(detail.order.couponPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.shopDiscountPrice>0">
                  店铺其他折扣: <span class="price-font" v-text="'-'+ToMoney(detail.order.shopDiscountPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.vipDiscountPrice>0">
                  会员Vip折扣: <span class="price-font" v-text="'-'+ToMoney(detail.order.vipDiscountPrice)"></span>
                </div>
                <div class="total-line" v-if="detail.order.price>0">
                  实际费用: <span class="price-font" v-text="'￥'+ToMoney(detail.order.price)"></span>
                </div>
              </div>
            </div>
          </div>

          <!--物流信息-->
          <div id="express-info" v-if="showType==='expressInfo'">
            <order-express-box :call-reload-detail="reloadExpress" :all-express-list="detail.allExpressList"
                               v-if="detail.orderExpress.id>0"
                               :detail="detail.orderExpress"/>
            <div v-if="!detail.orderExpress.id" align="center" style="color: #888888">
              暂无物流信息....
            </div>
          </div>

          <!--收货人-->
          <div class="custom-table" id="address-info" v-if="showType==='addressInfo'" style="margin-top: 20px">
            <div class="row">
              <div class="left">收货人:</div>
              <div class="right" v-text="detail.orderAddress.name"></div>
              <div class="c"></div>
            </div>
            <div class="row">
              <div class="left">收货电话:</div>
              <div class="right" v-text="detail.orderAddress.mobile"></div>
              <div class="c"></div>
            </div>
            <div class="row">
              <div class="left">收货地址:</div>
              <div class="right" v-text="detail.orderAddress.addressDetail"></div>
              <div class="c"></div>
            </div>
            <div class="c"></div>
          </div>
          <!--退换货-->
          <div id="apply-info" v-if="showType==='applyInfo' && detail.orderApply.id>0">
            <order-apply-detail-box v-if="detail.orderApply.id>0" :detail="detail.orderApply"/>
          </div>
          <!--发票信息-->
          <div id="invoice-info" v-if="showType==='invoiceInfo' && detail.order.isInvoice.id===1">
            <my-pdf v-if="!isClosePdf && detail.order.invoiceFileUrl  && detail.order.invoiceFileUrl.length>0"
                    style="width: 800px;height: 400px;" :pdf-url="detail.order.invoiceFileUrl"/>
          </div>


        </div>
        <div class="button-arr" v-if="detail.order.id>0" align="center">
          <el-button type="primary" @click="print">打印清单</el-button>
          <my-button type="primary"
                     v-if="detail.order.status.id===0
                      && (!detail.order.orderGroupId || (detail.order.orderGroupId>0 && (detail.order.orderGroupStatus.id===2 || detail.order.orderGroupStatus.id===6)))
                     && (!detail.order.sendStatus|| detail.order.sendStatus.id===0)
                     && detail.order.sendType.id!==2
                     && (detail.order.payType && detail.order.payType.id>-1)"
                     :click="function (){confirmSend()}"
                     text="确认发货"
                     access-action="Order/manage"></my-button>
          <my-button type="primary"
                     v-if="detail.order.status.id===1
                     && (!detail.order.orderGroupId || (detail.order.orderGroupId>0 && detail.order.orderGroupStatus.id===2))
                     && detail.order.sendStatus.id===1
                     && detail.order.sendType.id===1
                     && (detail.order.payType && detail.order.payType.id>-1)"
                     :click="function (){sendToMember()}"
                     text="确认送达"
                     access-action="Order/manage"></my-button>
          <my-button
            type="primary"
            v-if="detail.order.status.id===0
            && (!detail.order.orderGroupId || (detail.order.orderGroupId>0 && detail.order.orderGroupStatus.id===2))
            && detail.order.sendType.id===2
            && (detail.order.payType && detail.order.payType.id>-1)"
            :click="function (){confirmTake()}"
            text="确认自提"
            access-action="Order/manage"></my-button>
          <el-upload
            accept=".pdf"
            v-if="detail.order.isInvoice.id===1 && getUploadInvoice()"
            class="invoice-file-uploader"
            :action="UploadFileUrl"
            :headers="getHeader()"
            name="myUploadFile"
            :show-file-list="false"
            :on-success="uploadInvoiceFileSuccess">
            <my-button type="primary" text="上传发票" access-action="Order/manage"></my-button>
          </el-upload>
          <my-button
            type="primary"
            v-if="detail.order.isEnbaleOpenSubmitApply"
            :click="function (){openApply()}"
            text="开启退换货"
            access-action="OrderApply/manage"></my-button>
        </div>
        <!--        <express-item-list :express-list="detail.content"/>-->
      </div>
    </div>
    <div style="width: 1px; height: 1px; overflow: hidden">
      <iframe v-if="printerUrl" :src="printerUrl" style="width: 1600px;"></iframe>
    </div>
    <order-submit-express-dialog v-if="dialogVisible" :success-function="handlerSuccess"
                                 ref="orderSubmitExpressDialog"/>
    <order-submit-express-same-city-dialog v-if="dialogVisible" :success-function="handlerSuccess"
                                           ref="orderSubmitExpressSameCityDialog"/>
  </el-dialog>
</template>

<script>
import MemberItem from '../Common/MemberItem'
import ProductItem from '../Common/ProductItem'
import ExpressItemList from '../Common/ExpressItemList'
import OrderExpressBox from '../Common/OrderExpressBox'
import OrderApplyDetailBox from '../Common/OrderApplyDetailBox'
import MyPdf from '../Common/MyPdf'
import OrderSubmitExpressDialog from './OrderSubmitExpressDialog'
import OrderSubmitExpressSameCityDialog from './OrderSubmitExpressSameCityDialog'
import RoleTools from '../Tools/RoleTools'
import MyButton from '../Common/MyButton'

export default {
  name: 'OrderDialog',
  props: {
    successFunction: Function
  },
  components: {
    MyButton,
    OrderSubmitExpressSameCityDialog,
    OrderSubmitExpressDialog,
    MyPdf, OrderApplyDetailBox, OrderExpressBox, ExpressItemList, ProductItem, MemberItem
  },
  data: function () {
    return {
      info: '订单详情',
      printerUrl: '',
      width: 1250,
      showTypeArr: [],
      isClosePdf: false,
      showType: 'baseInfo',
      dialogVisible: false,
      currLoading: false,
      detail: {
        'orderAddress': {},
        'orderExpress': {},
        'allExpressList': {},
        'orderProductList': [],
        'orderApply': [],
        'order': {},
        'orderInvoice': {},
      }
    }
  },
  mounted() {
  },
  methods: {
    getUploadInvoice: function () {
      return true
      return RoleTools.checkAction('Order/updateInvoiceFileUrl')
    },
    print: function () {
      let $this = this
      localStorage.setItem('CurrOrderDetailCache', JSON.stringify(this.detail))
      $this.printerUrl = ''
      setTimeout(function () {
        $this.printerUrl = '/#/OrderDetailPage?isPrintPage=1'
      }, 2500)
    },
    handlerSuccess: function () {
      if (typeof this.$props.successFunction === 'function') {
        this.$props.successFunction()
      }
      this.reloadDetail()
    },
    uploadInvoiceFileSuccess: function (response) {
      console.log('上传发票成功',response)
      // updateInvoiceFileUrl
      let $this = this
      $this.MyRequest(this.ApiDoNameShop + 'Order/updateInvoiceFileUrl', {
        orderId: $this.detail.order.id,
        invoiceFileUrl: response.data
      }, function (data) {
        $this.detail.order.invoiceFileUrl = response.data

        // 如果当前正在查看发票
        if ($this.showType === 'invoiceInfo') {
          $this.isClosePdf = true
          setTimeout(function () {
            if (!$this.detail.order.invoiceFileUrl){
              $this.isClosePdf = false
            }
            $this.$forceUpdate()
          }, 500)
        }
        $this.$message.success('发票上传成功')
        $this.$forceUpdate()
      }, function () {
        $this.$message.error('更新发票地址错误,请稍后重试')
      })
    },
    reloadDetail: function () {
      this.getDetail(this.detail.order.id)
    },
    getDetail: function (id) {
      let $this = this
      $this.MyRequest(this.ApiDoNameShop + 'Order/getDetail', {id}, function (data) {
        $this.detail = data
        $this.initShowType()
        $this.dialogVisible = true
        $this.$forceUpdate()
      })
    },
    initShowType: function () {
      this.showTypeArr = [
        {name: '基本信息', key: 'baseInfo'},
        {name: '物流信息', key: 'expressInfo'}
      ]
      if (this.detail.order.sendType.id !== 2) {
        // this.showTypeArr.push({name:'收货人',key:'addressInfo'})
      }
      if (this.detail.orderApply && this.detail.orderApply.id > 0) {
        this.showTypeArr.push({name: '退换货信息', key: 'applyInfo'})
      }
      if (this.detail.order.isInvoice.id === 1) {
        this.showTypeArr.push({name: '发票信息', key: 'invoiceInfo'})
      }
    },
    changeShowType: function (showType) {
      this.showType = showType
    },
    hide: function () {
      this.detail.order.id = 0
      this.dialogVisible = false
      this.$forceUpdate()
    },
    open: function (id) {
      // this.detail = detail
      this.showType='baseInfo'
      this.getDetail(id)
    },
    confirmSend: function () {
      if (this.detail.order.sendType.id === 0) {
        this.$refs.orderSubmitExpressDialog.open(this.detail.order)
      }
      if (this.detail.order.sendType.id === 1) {
        this.$refs.orderSubmitExpressSameCityDialog.open(this.detail.order, this.detail.orderProductList)
      }
    },
    sendToMember: function () {
      let $this = this
      $this.$confirm('您确认要进行该操作吗(确认送达至用户)?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.MyRequest(this.ApiDoNameShop + 'Order/sendToMember', {
          id: this.detail.order.id
        }, function (data) {
          $this.reloadDetail()
          $this.$message.success('操作成功')
        })
      })
    },

    // 确认自提
    confirmTake: function () {
      let $this = this
      $this.$prompt('请输入 提货码', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^\d{5}$/,
        inputErrorMessage: '提货码 格式不正确'
      }).then(({value}) => {
        $this.MyRequest(this.ApiDoNameShop + 'Order/completeTake', {
          id: this.detail.order.id,
          takeNumber: value
        }, function (data) {
          $this.$message.success('操作成功')
          $this.reloadDetail()
        }, function (res) {
          $this.$message.error('操作失败: ' + res.message)
        })
      }).catch(() => {
      })
    },
    reloadExpress: function (id) {
      // Order/getExpressDetail
      let $this = this
      $this.MyRequest($this.ApiDoNameShop + 'Order/getExpressDetail', {
        id: id
      }, function (data) {
        $this.detail.orderExpress = data.orderExpress
        $this.$forceUpdate()
        // console.log('data')
        // $this.reloadDetail()
        // $this.$message.success('操作成功')
      })
    },
    // 开启退换货
    openApply: function () {
      let $this = this
      $this.$confirm('您确认要进行该操作吗(默认开启退换货时间为2天，无法撤销)?', '系统提醒', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        $this.MyRequest(this.ApiDoNameShop + 'Order/openApply', {
          orderId: this.detail.order.id,
          dayNums: 2
        }, function (data) {
          $this.reloadDetail()
          $this.$message.success('操作成功')
        })
      })
    },
  }
}
</script>

<style scoped>

</style>
